<template>
    <div class="ui-comment">
        <div class='comment-item'>
            <div class="comment-head">
                <a href="javascript:;" @click="goPersonel(item.member_id)" :class="[{'unread' : type == 1}, 'info']">
                    <div class="info-photo">
                        <img v-if="item.member_head_img" :src="item.member_head_img">
                        <img v-else src="../assets/icon-un-login.png" />
                        <i v-if='member_info.level_id && item.member_level_id' class="info-vip"></i>
                    </div>
                    <div class="info-text">
                        <div class="info-name">{{item.member_nickname}}</div>
                        <span v-if='member_info.level_id && item.member_level_id' class="info-level">VIP{{item.member_level_id}}</span>
                    </div>
                </a>
                <div class="con"></div>
                <a v-if="type == 1 || type == 3 || type == 5" :class="[{gooded:item.is_admire}, 'info-good']" href="javascript:;" @click="toGood(item.id)">
                    <span v-if="item.admire_num" class="good-text">{{item.admire_num}}</span>
                    <i class="good-click"></i>
                </a>
                <a v-if="type == 2" :class="[{gooded:false}, 'info-good']" @click="$emit('report',item)">
                    <span class="good-text">举报</span>
                </a>
            </div>
            <div v-if="type != 4" :class="[{'no-border' : type == 2}, 'comment-con']">
                <div class="comment-text">
                    <!-- {{item.member_content}}//<span>{{item.nickname}}</span> -->
                    {{item.content}}
                </div>
                <div class="comment-imgs">
                    <img :src="img" v-for="img in item.image" @click="previewImage(img)">
                </div>
                <!-- <div v-if="item.admire_num" class="admire-list">
                    <i v-for="n in item.admire_num" class="admire-item"></i>
                </div> -->
                <div v-if="type == 2">
                    <div class="comment-info">
                        {{this.$moment(item.create_time * 1000).fromNow()}}
                    </div>
                    <div class="good-list">
                        <div v-if="item.admire_num" >
                            <span v-for="n in 4">
                                <template v-if="admireList[n-1]">
                                    <img v-if="admireList[n-1].member_head_img" class="good-item" :src="admireList[n-1].member_head_img" />
                                    <img v-else class="good-item" src="../assets/icon-un-login.png" />
                                </template>
                            </span>
                            <a :href="this.$config.pages.admire+'?id='+ item.id" class="good-n">{{item.admire_num}}人赞过
                                <i class="more"></i>
                            </a>
                        </div>
                        <div v-else class="no-good">暂无人赞过</div>
                        <div class="space"></div>
                        <a :class="[{gooded:item.is_admire}, 'info-good']" href="javascript:;" @click="toGood(item.id)">
                            <span v-if="item.admire_num" class="good-text">{{item.admire_num}}</span>
                            <i class="good-click"></i>
                        </a>
                    </div>
                </div>
                <div v-else class="comment-info">
                    {{this.$moment(item.create_time * 1000).fromNow()}}
                    <a v-if="type == 5 && item.reply_total" class="look-talk" :href="this.$config.pages.comment+'?id='+ item.id+'&type=reply'">{{item.reply_total}}回复</a>
                    <a v-if="type == 5 && !item.reply_total" class="look-talk" :href="this.$config.pages.comment+'?id='+ item.id+'&type=reply'">回复TA</a>
                    <a v-if="type != 5 && type != 2" class="reply-ta" :href="this.$config.pages.comment+'?id='+ item.id+'&type=reply'">回复TA</a>
                    <div class="has-del"></div>
                    <div v-if="userId == item.member_id" class="comment-del" @click="del(item.id)">删除</div>
                    <!-- <a class="look-talk" href="/">查看对话</a> -->
                </div>
                <!-- type == 2 有动态详情 type= 1 有新闻详情 -->
                <a v-if="showInfo && (item.news_info || item.publish_info)" 
                    :href="item.news_info ? item.news_info.detail_url : ($config.pages.square + '#/detail?id='+item.publish_info.id)" class="comment-new">
                    <img 
                        v-if="(item.news_info && item.news_info.cover_img.length) || (item.publish_info && item.publish_info.image && item.publish_info.image.length)" 
                        :src="item.news_info ? item.news_info.cover_img[0] : item.publish_info.image[0]" 
                        class="new-img" > 
                    <i v-if="item.news_info && item.news_info.type == 2" class="is-video"></i>
                    <div class="new-text">{{item.news_info ? item.news_info.title : item.publish_info.content}}</div>
                </a>
            </div>
        </div>

        <ui-popup v-if="userId == item.member_id" :status="popup.status" @close="popupClose">
            <div class="popup-common exit-pop">
                <div class="exit-content">
                    <p> {{ popup.title }} </p>
                    <span> {{ popup.content }} </span>
                </div>
                <div class="footer">
                    <a href="javascript:;" @click="popupClose">取消</a>
                    <a href="javascript:;" @click="confirm">确定</a>
                </div>
            </div>
        </ui-popup>

        <ui-preview :config="preview" v-if="preview.status" @close="preview.status = false"/>
    </div>
</template>
<script>
    import popup from "../components/popup.vue";
    import uiPreview from '../components/preview.vue'
    export default {
        name: 'ui-comment-item',
        props: {
            item: Object,
            /* type
            *  1 右上角点赞、 没有删除、有查看对话   （我发布的、 回复我的）
            *  2 右上角举报、 没有删除、 有点赞列表  （回复列表页面）
            *  3 用户评论中心  点击头像不会跳转
            *  4 没有点赞、删除等操作  （点赞列表页面）
            *  5 显示回复条数 点击跳转  (新闻详情页 ---- 评论列表)
            */
            type: {
                type: [String, Number],
                default: 1,
            },
            showInfo:{
                type:Boolean,
                default:true,
            },
            // 点赞列表  回复列表页面才有
            admireList: {
                type: Array,
                default: () => [],
            },
            
        },
        components: {
            [popup.name]: popup,
            [uiPreview.name]:uiPreview,
        },
        data() {
            return {
                isDel: false,
                userId: '',
                popup: {
                    status: false
                },
                member_info: {},
                preview:{
                    status:false,
                    delete:false,
                    active:0,
                    list:[]
                },
            }
        },
        mounted() {
            let member_info = localStorage.getItem('member_info');
            this.member_info = member_info ? JSON.parse(member_info) : {};
            this.userId = this.member_info ? this.member_info.id : '';
        },
        methods: {
            // 点赞
            toGood(id) {
                if (this.item.is_admire) {
                    this.$http.post('?ct=comment&ac=cancel_admire', { comment_id: id }).then(response => {
                        let { data } = response;
                        if (data.code == 0) {
                            this.item.is_admire = false;
                            this.item.admire_num--;
                            let info = this.admireList.filter((res) => {
                                return this.member_info.id == res.member_id;
                            })
                            let index = this.admireList.indexOf(info[0]);
                            if(index != -1) {
                                this.admireList.splice(index, 1);
                            }
                        } else {
                            this.$toast(data.msg)
                        }
                    })
                } else {
                    this.$http.post('?ct=comment&ac=admire', { comment_id: id }).then(response => {
                        let { data } = response;
                        if (data.code == 0) {
                            this.item.is_admire = true;
                            this.item.admire_num++;
                            this.admireList.unshift({member_head_img: this.member_info.head_img, member_id: this.member_info.id})

                        } else {
                            this.$toast(data.msg)
                        }
                    })
                }
            },
            
            goPersonel (id) {
                if(id != this.userId && this.type != 3) {
                    location.href = this.$config.pages.profile+'?id='+ id;
                }
            },

            // 删除
            del(id) {
                this.popup.title = "删除评论";
                this.popup.content = "确认要删除评论吗？";
                this.popup.status = true;
            },

            popupClose() {
                this.popup.status = false;
            },

            confirm() {
                this.popup.status = false;
                this.$http.post('?ct=comment&ac=del_comment', { comment_id: this.item.id }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        this.$emit('del',  this.item.id);
                        this.$toast('删除成功')
                    } else{
                        this.$toast(data.msg)
                    }
                })
            },
            //图片预览
            previewImage(img){
                this.preview.active = 1;
                this.preview.list = [img]
                this.preview.status = true;
            },
        }
    }
</script>

<style lang="less">
    .comment-item {
        padding: 36px 24px 0 30px;
        background: #fff;

        &.hide {
            display: none;
        }

        .comment-head {
            display: flex;
            align-items: center;
            justify-content: center;

            .info {
                display: flex;
                position: relative;
                
                /* &.unread:after {
                    display: block;
                    content: '';
                    width: 14px;
                    height: 14px;
                    background: #ff3d00;
                    border-radius: 50%;
                    position: absolute;
                    right: -24px;
                    top: 10px;
                } */
            }

            .con {
                flex: 1;
            }

            .info-photo {
                position: relative;
                margin-right: 17px;
                width: 58px;
                height: 58px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }

                .info-vip {
                    display: inline-block;
                    position: absolute;
                    right: 0px;
                    bottom: 0;
                    width: 24px;
                    height: 22px;
                    background-image: url("../assets/comment-vip.png");
                    background-size: 100% 100%;
                }
            }

            .info-name {
                margin-bottom: 16px;
                font-size: 28px;
                color: #a98273;
            }

            .info-level {
                display: flex;
                color: #919191;
                font-size: 24px;
                margin-bottom: 17px;

            }


        }

        .info-good {
            display: flex;
            align-items: center;
            justify-content: center;

            .good-click {
                margin: 0 12px 0 10px;
                width: 33px;
                height: 30px;
                background: url('../assets/good-click.png') no-repeat center center /cover;
            }

            .good-text {
                font-size: 28px;
                color: #919191;
            }

            &.gooded {
                .good-click {
                    background: url('../assets/gooded.png') no-repeat center center /cover;
                }

                .good-text {
                    color: #e64a19;
                }
            }
        }


        .comment-con {
            margin-left: 74px;
            padding-bottom: 26px;
            border-bottom: 1px solid #e3e3e3;

            &.no-border {
                border-bottom: none;
            }

            .comment-text {
                font-size: 36px;
                color: #282828;
                line-height: 52px;
            }

            .comment-info {
                display: flex;
                align-items: center;
                margin: 5px 0 0;
                font-size: 24px;
                color: #919191;
                line-height: 40px;

                a {
                    margin-left: 15px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 7px 13px;
                    border: 2px solid #e2e2e2;
                    border-radius: 20px;
                    color: #919191;
                    line-height: 1;
                }

                .reply-ta {
                    margin: 0 15px;
                }

                .has-del {
                    flex: 1;
                }
            }

            .comment-imgs {
                margin:15px 0 15px;
                img {
                    display: block;
                    max-width:375px;
                    height: auto;
                }
            }
            .comment-new {
                position: relative;
                margin-top: 40px;
                display: flex;

                .new-img {
                    display: block;
                    width: 94px;
                    height: 94px;
                    flex-shrink: 0;
                    flex-grow: 0;
                }

                .is-video {
                    position: absolute;
                    left: 23px;
                    top: 23px;
                    width: 47px;
                    height: 47px;
                    background: url(../assets/comment-video.png) no-repeat center center / cover;
                }

                .new-text {
                    flex:1;
                    display: -webkit-box;
                    width: 522px;
                    height: 94px;
                    padding: 7px 13px;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: 42px;
                    font-size: 30px;
                    color: #919191;
                    background-color: #f7f7f7;
                }
            }
        }

        .good-list {
            margin-top: 14px;
            font-size: 24px;
            color: #919191;
            display: flex;

            &>div {
                display: flex;
                align-items: center;
            }

            .good-item {
                width: 36px;
                height: 36px;
                margin-right: 4px;
                border-radius: 50%;
                border: 1px solid #eee;
            }

            .good-n {
                display: flex;
                margin-left: 13px;
                font-size: 20px;
                color: #282828;
                justify-content: center;
                align-items: center;

                i {
                    margin-left: 5px;
                    width: 8px;
                    height: 12px;
                    background: url(../assets/more.png) no-repeat center center / cover;
                }
            }

            .no-good {
                color: #282828;
            }

            .space {
                flex: 1;
            }
        }

        .comment-del {
            color: #919191;
            font-size: 28px;
        }
    }
    .popup-common {
        position: absolute;
        left: 11%;
        background: #fff;
        z-index: 999;
        border-radius: 10px;
    }

    .exit-pop {
        top: 35%;
        width: 600px;
        height: 330px;
        .exit-content {
            margin-top: 40px;
            text-align: center;
            p {
                margin-bottom: 35px;
                font-size: 36px;
                font-weight: 500;
                color: #282828;
            }
            span {
                font-size: 32px;
                color: #666;
            }
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            a {
                display: inline-block;
                width: 50%;
                padding: 20px 0;
                text-align: center;
                font-size: 36px;
                border-top: 1px solid #e2e2e2;
                &:first-child {
                    color: #666;
                    border-right: 1px solid #e2e2e2;
                }
                &:last-child {
                    color: #e64a19;
                }
            }
        }
    }

    .model-popup {
        top: 29%;
        width: 600px;
        height: 380px;
        padding: 40px;
        .title {
            font-size: 36px;
            color: #282828;
            text-align: center;
        }
        .model-box {
            margin-top: 70px;
        }
        .model-item {
            position: relative;
            p {
                margin-bottom: 20px;
                font-size: 32px;
                color: #666;
            }
            span {
                font-size: 24px;
                color: #999;
            }
            i {
                position: absolute;
                top: 30%;
                right: 0;
                width: 26px;
                height: 19px;
                background-image: url("../assets/tousu_list_selected.png");
                background-size: 100% 100%;
                display: none;
            }
            &:first-child {
                margin-bottom: 60px;
            }
        }

        .model-item.active {
            p {
                color: #e64a19
            }
            i {
                display: inline-block;
            }
        }

        .close-btn {
            position: relative;
            bottom: -0.8rem;
            left: 45%;
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url("../assets/icon-home_close.png");
            background-size: 100% 100%;
        }

    }
</style>